<script setup lang="ts">
import { ref, onMounted } from 'vue'
const searchTime = ref('')

const today = new Date();
searchTime.value = today.toISOString().split('T')[0];

const coalListData = ref(['1#煤场', '2#煤场', '3#煤场'])
const coalIndex = ref(0)

function clickCoal(index: number) {
    coalIndex.value = index
    getAreaByBunkerId(bunkerData.value[coalIndex.value].bunkerId)
}

import { GetAllBunkerData,AreaByBunkerId,pileInBunker } from '@/api'

// 煤场
const bunkerData = ref<any>([])
function getGetAllBunkerData(){
    GetAllBunkerData().then(res=>{
        console.log('煤场----',res.data)
        bunkerData.value = res.data
        getAreaByBunkerId(res.data[0].bunkerId)
    })
}
// 区域-下拉框数据
const AreaBunkerData = ref<any>([])
const getAreaByBunkerId = (id:any) => {
    AreaByBunkerId(id).then(res=>{
        console.log('煤场区域----',res.data)
        AreaBunkerData.value = res.data
        getPileInBunker()
    })
}

const coalPileMsg = ref<any>({})
const coalQualityInfo = ref<any>({})
const coalStockpileRecords = ref<any>({})
const coalExtractionRecords = ref<any>({})
const coalPileBunkerMsg = ref<any>({})
const getPileInBunker = () => {
    pileInBunker(bunkerData.value[coalIndex.value].bunkerId, AreaBunkerData.value[0].id, searchTime.value).then(res=>{
        console.log('煤堆信息----',res.data)
        coalPileMsg.value = res.data.coalPileMsg
        coalQualityInfo.value = res.data.coalQualityInfo
        coalStockpileRecords.value = res.data.coalStockpileRecords
        coalExtractionRecords.value = res.data.coalExtractionRecords
        coalPileBunkerMsg.value = res.data.coalPileBunkerMsg
    })
}

function changeTime(){
    getPileInBunker()
}

onMounted(()=>{
    getGetAllBunkerData()
    
})


</script>
<template>
    <div class="flex_bg pile_flex">
        <div class="pile_left">
            <div class="record_search" style="background: #fff;">
                <div class="name">所属煤场:</div>
                <ul class="record_search_tab">
                    <li :class="coalIndex == index ? 'hover' : ''" v-for="(item, index) in bunkerData" @click="clickCoal(index)">
                        {{ item.bunkerName }}
                    </li>
                </ul>
                <el-date-picker v-model="searchTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择" :clearable="false" :editable="false" @change="changeTime"  />
                
            </div>
            <ul class="pile_info">
                <li>
                    <span>总存煤量(吨)</span>
                    <p>{{ coalPileBunkerMsg.zcml }}</p>
                </li>
                <li>
                    <span>剩余库存空间(吨)</span>
                    <p>{{ coalPileBunkerMsg.sykckj }}</p>
                </li>
                <li>
                    <span>存煤可用(天)</span>
                    <p>{{ coalPileBunkerMsg.cmky }}</p>
                </li>
                <li>
                    <span>今日进煤量(吨)</span>
                    <p>{{ coalPileBunkerMsg.jrjml }}</p>
                </li>
                <li>
                    <span>今日耗煤量(吨)</span>
                    <p>{{ coalPileBunkerMsg.jrhml }}</p>
                </li>
            </ul>
            <div class="pile_photo mt15">
                <img class="ph"src="../../assets/img/ph_3d.jpg" alt="">
            </div>
        </div>
        <div class="pile_right table_info">
            <h3>煤种信息</h3>
            <table>
                <colgroup>
                    <col width="25%">
                    <col width="25%">
                    <col width="25%">
                    <col width="25%">
                </colgroup>
                <tr>
                    <th>所属煤场</th>
                    <td>{{ coalPileMsg.bunkerName }}</td>
                    <th>所在煤区</th>
                    <td>{{ coalPileMsg.bunkerArea }}</td>
                </tr>
                <tr>
                    <th>所属煤种</th>
                    <td>{{ coalPileMsg.bunkerType }}</td>
                    <th></th>
                    <td></td>
                </tr>
                <tr>
                    <th>体积</th>
                    <td>{{ coalPileMsg.volume }}</td>
                    <th>密度</th>
                    <td>{{ coalPileMsg.density }}</td>
                </tr>
                <tr>
                    <th>重量</th>
                    <td>{{ coalPileMsg.weight }}吨</td>
                    <th>高度范围</th>
                    <td>{{ coalPileMsg.heightRange }}</td>
                </tr>
                <tr>
                    <th>角度范围</th>
                    <td>{{ coalPileMsg.angleRange }}</td>
                    <th></th>
                    <td></td>
                </tr>
            </table>
            <h3 class="mt15">煤质信息</h3>
            <table>
                <tr>
                    <th>全水分</th>
                    <th>内水分</th>
                    <th>挥发分</th>
                    <th>固定碳</th>
                    <th>灰分</th>
                    <th>硫S</th>
                    <th>灰熔点t2</th>
                    <th>发热量</th>
                    <th>软化温度</th>
                </tr>
                <tr>
                    <td><span v-if="coalQualityInfo.totalMoisture != null">{{ parseFloat(coalQualityInfo.totalMoisture.toFixed(2)).toString() }}%</span></td>
                    <td><span v-if="coalQualityInfo.internalMoisture != null">{{ parseFloat(coalQualityInfo.internalMoisture.toFixed(2)).toString() }}%</span></td>
                    <td><span v-if="coalQualityInfo.volatileMatter != null">{{ parseFloat(coalQualityInfo.volatileMatter.toFixed(2)).toString() }}%</span></td>
                    <td><span v-if="coalQualityInfo.fixedCarbon != null">{{ parseFloat(coalQualityInfo.fixedCarbon.toFixed(2)).toString() }}%</span></td>
                    <td><span v-if="coalQualityInfo.ashContent != null">{{ parseFloat(coalQualityInfo.ashContent.toFixed(2)).toString() }}%</span></td>
                    <td><span v-if="coalQualityInfo.sulfur != null">{{ parseFloat(coalQualityInfo.sulfur.toFixed(2)).toString() }}%</span></td>
                    <td><span v-if="coalQualityInfo.ashFusionPointT2 != null">{{ parseFloat(coalQualityInfo.ashFusionPointT2.toFixed(2)).toString() }}%</span></td>
                    <td><span v-if="coalQualityInfo.calorificValue != null">{{ parseFloat(coalQualityInfo.calorificValue.toFixed(2)).toString() }}%</span></td>
                    <td><span v-if="coalQualityInfo.softeningTemperature != null">{{ parseFloat(coalQualityInfo.softeningTemperature.toFixed(2)).toString() }}%</span></td>
                </tr>
            </table>
            <h3 class="mt15">堆煤作业记录</h3>
            <table>
                <tr>
                    <th>堆煤时间</th>
                    <th>堆煤重量</th>
                    <th>煤种</th>
                    <th>品名/编码</th>
                    <th>航次</th>
                    <th>船名</th>
                    <th>供应商</th>
                    <th>操作班组</th>
                </tr>
                <tr v-if="coalStockpileRecords.length == 0">
                    <td colspan="8">无</td>
                </tr>
                <tr v-else v-for="(item,index) in coalStockpileRecords" :key="index">
                    <td>{{ item.stockpileTime }}</td>
                    <td>{{ item.stockpileWeight }}</td>
                    <td>{{ item.coalType }}</td>
                    <td><p class="flashing-text">{{ item.productNameOrCode }}</p></td>
                    <td>{{ item.voyage }}</td>
                    <td>{{ item.shipName }}</td>
                    <td>{{ item.supplier }}</td>
                    <td>{{ item.operationTeam }}</td>
                </tr>
            </table>

            <h3 class="mt15">取煤作业记录</h3>
            <table>
                <tr>
                    <th>取煤时间</th>
                    <th>取煤重量</th>
                    <th>取煤区域</th>
                    <th>入炉名称</th>
                    <th>入炉位置</th>
                    <th>入炉煤质</th>
                    <th>操作班组</th>
                </tr>
                <tr v-if="coalExtractionRecords.length == 0">
                    <td colspan="7">无</td>
                </tr>
                <tr v-else v-for="(item,index) in coalExtractionRecords" :key="index">
                    <td>{{ item.extractionTimePeriod }}</td>
                    <td>{{ item.extractionWeight }}</td>
                    <td>{{ item.extractionArea }}</td>
                    <td>{{ item.furnaceName }}</td>
                    <td>{{ item.furnaceLocation }}</td>
                    <td><p class="flashing-text">{{ item.furnaceCoalQuality }}</p></td>
                    <td>{{ item.operationTeam }}</td>
                </tr>
            </table>

        </div>
    </div>
</template>
<style scoped lang="scss">
.pile_flex{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    .pile_left{
        width: 40%;
        padding-right: 15px;
    }
    .pile_right{
        width: 60%;
        background: #fff;
        border: 1px solid #E0E5ED;
    }
}
</style>